<template>
  <MoveModal
    width="80%"
    :visible="isModel"
    :title="`${general_config.subject}信息`"
    :footer="null"
    :maskClosable="false"
    @cancel="
      () => {
        isModel = false
      }
    "
  >
    <div class="general space_between">
      <!-- 树组件 -->
      <div class="general_tree">
        <GENERALTREE
          ref="generalTreeRef"
          :general_config="general_config"
          @f_getSelectData="s_getSelectData"
        ></GENERALTREE>
      </div>

      <div class="general_info">
        <!-- 表单 -->
        <a-form-model ref="generalForm" :rules="general_config.rules" :model="selectData">
          <a-row v-for="(f_item, index) in general_config.fill_item" :key="index">
            <!-- 段落标题 -->
            <template v-for="item in f_item">
              <div
                v-if="item.field in general_config.paragraph"
                class="cardArea_title"
                style="margin: 20px 10px"
                :key="item.field"
              >
                <div class="cardArea_title_icon"></div>
                <div class="cardArea_title_label" style="font-size: 15px">
                  {{ general_config.paragraph[item.field] }}
                </div>
              </div>
              <template v-if="item.hidden != true">
                <a-col v-if="showChange(general_config.expression[item.field])" :key="item.describe" :span="12">
                  <!-- 段落内容 -->
                  <a-form-model-item
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    :prop="item.field"
                    :label="item.describe"
                    style="width: 95%"
                  >
                    <div :key="updateKey">
                      <template v-if="['select', 'tree'].includes(item.type)">
                        <GENERALSELECT :enum="item.enum" :value="selectData[item.field]" />
                      </template>
                      <template v-else-if="item.type == 'file'">
                        <GENERALUPLOAD :value="selectData[item.field]" />
                      </template>
                      <template v-else> {{ selectData[item.field] }} </template>
                    </div>
                  </a-form-model-item>
                </a-col>
              </template>
            </template>
          </a-row>
        </a-form-model>
      </div>
    </div>
  </MoveModal>
</template>
<script>
export default {
  data() {
    return {
      updateKey: 0, // 组件更新key
      general_config: {}, // 通用树核心配置
      selectData: {}, // 右侧选中显示的数据
      isModel: false, // 模态框状态
      labelCol: { span: 10 }, // label宽
      wrapperCol: { span: 14 }, // 组件宽
    }
  },
  created() {},
  methods: {
    // 控件显示
    showChange(expression) {
      if (expression == undefined || expression == '') {
        return true
      } else {
        return eval(expression)
      }
    },
    // 获取树点击选中数据
    s_getSelectData(data) {
      this.selectData = data
      this.updateKey++
    },
    f_init(config) {
      this.general_config = config
      this.isModel = true
    },
  },
  components: {
    GENERALTREE: () => import('@/views/FormAssembly/generalTree.vue'),
    GENERALSELECT: () => import('@/views/customComponents/generalSelect.vue'),
    GENERALUPLOAD: () => import('@/views/customComponents/generalUpload.vue'),
    MoveModal: () => import('@/components/Power/MoveModal.vue'),
  },
}
</script>

<style lang="less" scoped>
//垂直居中 水平两端对齐
.space_between {
  display: flex;
  justify-content: space-between;
}

.general {
  width: 100%;
  &_info,
  &_tree {
    height: 75vh;
    border: 1px solid #eee;
    overflow: auto;
  }
  &_info {
    width: 75%;
    padding: 10px;
  }
  &_tree {
    width: 24%;
  }
}

// 小标题样式
.cardArea {
  border: none;
  // 卡片标题
  &_title {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    width: 100%;
    &_icon {
      width: 3px;
      height: 17px;
      background-color: #5b79fb;
    }

    &_label {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 96%;
      margin-left: 0.5%;
      font-size: 19px;
      font-weight: 600;
      color: #232323;
      letter-spacing: 2px;
    }
  }
}
</style>
